{extend name="template/base_default"}
{block name="header"}
<link rel="stylesheet" href="__CSS__/common.css">
<link rel="stylesheet" href="__CSS__/activity/activity.css">
<link rel="stylesheet" href="__CSS__/weuix.min.css"/>
<!--<script src="__JS__/zepto.min.js"></script>-->
<script src="__JS__/updown.js"></script>
<script src="__JS__/lazyimg.js"></script>
{/block}
{block name="body"}
<div class="left">
    {volist name="list" id="vo"}
    <div class="unselected-button" id="{$vo.code}">
        <p>{$vo.name}</p>
        <div class="activityBig">
        {volist name="vo._child" id="chil"}
        <div class="activity" id="{$chil.code}">{$chil.name}</div>
        {/volist}
        </div>
    </div>
    {/volist}
</div>

<div class="right" id="right">
    <!--<div id="xinwen" class="rightContent">-->
        <!--<img src="__IMG__/index/banner.jpg">-->
        <!--<p>测试内容测试内容测试内容测试内容测测试内内容测试内容测试内容测试内容测试内</p>-->
        <!--<img src="__IMG__/index/banner.jpg">-->
        <!--<img src="__IMG__/index/banner.jpg">-->
        <!--<img src="__IMG__/index/banner.jpg">-->
    <!--</div>-->
    <!--{volist name="list" id="vo"}-->
        <!--{volist name="vo._child" id="chil"}-->
        <!--<div class="activity" id="{$chil.code}"></div>-->
        <!--{/volist}-->
    <!--{/volist}-->
</div>
{include file="template/nav_bar"}
{/block}
{block name="footer"}
<script type="text/javascript" src="__JS__/public.js"></script>
<script>

    var rightContent = "<div id='xinwen' class='rightContent'><img src='__IMG__/index/banner.jpg'><p>测试内容测试内容测试内容测试内容测测试内内容测试内容测试内容测试内容测试内</p><img src='__IMG__/index/banner.jpg'><img src='__IMG__/index/banner.jpg'><img src='__IMG__/index/banner.jpg'></div>";
//
//    $(".activity").click(
//        function(){
//
//
//         //   $(".right").prepend(rightContent);
//        }
//    )
    $(".unselected-button").click(
        function(){
            console.log('2222');
            if($(this).hasClass('unselected-button')){
                $(this).addClass('selected-button').siblings().removeClass('selected-button');
                $(this).siblings().children(".activityBig").css("max-height","0px");
            }
            if($(this).children(".activityBig").css("max-height")=="0px"){
                console.log('11111');
                $(this).children(".activityBig").css("max-height","300px");
            }
            else{
                $(this).children(".activityBig").css("max-height","0px");

            }
        }
    )

    $(".activity").click(function(){
        $(".right").children().remove();
        cate=$(this).attr('id');
//页数
        var page = 0;
        doClss ='dropload-down';

        $('#right').dropload({
            scrollArea : window,
            autoLoad : true,//自动加载
            domDown : {
                domClass   : doClss,
                domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
                domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
                domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
            },
            loadDownFn : function(me){
                page++;

                window.history.pushState(null, document.title, window.location.href);
                var result = '';
                $.ajax({
                    type: 'GET',
                    url:'http://cnminjian.cn/minjian/public/weixin.php/weixin/activity/data.html?p='+page+'&type='+cate,
                    dataType: 'json',
                    success: function(data){
                        var arrLen = data.length;
                        if(arrLen > 0){


                            for(var i=0; i<arrLen; i++){
                                result+='<div class="rightContent">'
                                        +'<p>测试内容测试内容测试内容测试内容测测试内内容测试内容测试内容测试内容测试内</p>'
                                        +'<img src="">'
                                        +' <li class="title">'+data[i].title+'</li>'
                                        +'</a>'
                                        +'</ul>'
                                        +'</div>'
                                ;
                            }
                            // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }

                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('.'+doClss).before(result);
                            var lazyloadImg = new LazyloadImg({
                                el: '.weui-updown [data-img]', //匹配元素
                                top: 50, //元素在顶部伸出长度触发加载机制
                                right: 50, //元素在右边伸出长度触发加载机制
                                bottom: 50, //元素在底部伸出长度触发加载机制
                                left: 50, //元素在左边伸出长度触发加载机制
                                qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
                                load: function(el) {
                                    el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
                                },
                                error: function(el) {

                                }
                            });
                            //
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },300);
                    },
                    error: function(xhr, type){
                        // alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    });
</script>
{/block}